<template>
    <div>
        <h3>会员列表</h3>

        <input type="button" value="增加" class="btn btn-primary" @click="add">

        <hr>
        会员名称:<input type="text" v-model="quer.userName">
        会员等级:
        <select v-model="quer.LevelID">
            <option value="">请选择</option>
            <option :value="item.Id" v-for="item in data1.list">{{ item.LevelName }}</option>
        </select>
        <input type="button" value="查询" @click="GetList" class="btn btn-primary">


        <table class="table table-bordered">
            <tbody>
                <tr style="background-color: aqua;">
                    <td>id</td>
                    <td>会员编号</td>
                    <td>手机号 </td>
                    <td>姓名</td>
                    <td>身份证号</td>
                    <td>会员等级</td>
                    <td>会员生日</td>
                    <td>性别</td>
                    <td>积分</td>
                    <td>余额</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.Id" style="background-color: aliceblue;">
                    <td>{{ item.Id }}</td>
                    <td>{{ item.MemberCode }}</td>
                    <td>{{ item.Phone.substring(0, 3) + "****" + item.Phone.substring(7) }}</td>
                    <td>{{ item.UesrName }}</td>
                    <td>{{ item.Card }}</td>
                    <td>
                        <span v-if="item.LevelId == 1">普通会员</span>
                        <span v-if="item.LevelId == 2">黄金会员</span>
                        <span v-if="item.LevelId == 3">钻石会员</span>
                        <span v-if="item.LevelId == 4">星钻会员</span>
                        <span v-if="item.LevelId == 5">至尊会员</span>
                    </td>
                    <td>{{ moment(item.Birthday).format("YYYY-MM-DD HH:mm:ss") }}</td>
                    <td>{{ item.Sex == 1 ? "男" : "女" }}</td>
                    <td>{{ item.JiFen }}</td>
                    <td style="color: red;">￥{{ item.Money.toFixed(2) }}</td>
                    <td>
                        <input type="button" value="详情" class="btn btn-priamry">
                        <input type="button" value="修改" class="btn btn-success" @click="update(item.Id)">
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.Id)
                            ">
                    </td>
                </tr>
            </tbody>
        </table>



    </div>
</template>

<script setup lang="ts">

import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
//跳转路由
import { useRouter } from 'vue-router';
import moment from 'moment';
const router = useRouter();

const add = () => {

    router.push('/memberlevellist');
}

//生命周期
onMounted(() => {
    getxiala();
    GetList();
})


//=======================数据===========================
//=======================数据===========================
//=======================数据===========================
//查询
let quer = reactive({
    userName: '',
    LevelID: '',
})
//下拉框
let data1: any = reactive({
    list: []
})
//显示
let data: any = reactive({
    list: []
})


//=======================函数===========================
//=======================函数===========================
//=======================函数===========================
//修改跳转
const update = (id: any) => {
    router.push({
        path: '/memberUpdate',
        query: {
            id: id
        }
    });
}
//删除
const del = (id: any) => {
    if (confirm('确定删除吗')) {
        axios({
            method: "delete",
            url: "/api/Member/DelMemberItem",
            params: {
                id: id,
            }
        })
            .then(res => {
                console.log(res);
                if (res.data > 0) {
                    alert('删除成功');
                    GetList();
                }
                else {
                    alert('删除失败');
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}


//显示
const GetList = () => {
    axios({
        method: "get",
        url: "/api/Member/GetMemberModelsList",
        params: quer
    })
        .then(res => {
            data.list = res.data;
        })
        .catch(err => {
            console.log(err);
        })
}

//下拉框
const getxiala = () => {
    axios({
        method: 'get',
        url: '/api/Member/GetMemberLevelList',
    })
        .then(res => {
            data1.list = res.data;
        })
        .catch(err => {
            console.log(err);
        })
}



</script>











<style scoped>
input[type='button'] {
    margin-left: 10px;
}
</style>